﻿@page "/chart/average-true-range-indicator"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a stock chart with candle series and an average true range indicator. The trackball shows the information about the stock and signal value of a day.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure an average true range indicator. The average true range indicator measures the volatility of the stock by comparing the current value with the previous value.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the average true range indicator can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/stock-chart/technical-indicators/#average-true-range-atr'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="AAPL - 2012-2017" Theme="@Theme">
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" ZoomFactor="0.2" ZoomPosition="0.6">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Price" LabelFormat="${value}" Minimum="50"
                           Maximum="170" PlotOffset="25" Interval="30" RowIndex="1" OpposedPosition="true">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartAxes>
            <ChartAxis Name="secondary" OpposedPosition="true" RowIndex="0" Title="ATR">
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                <ChartStriplines>
                    <ChartStripline ZIndex="ZIndex.Behind" Start="0" End="14" Text="" Color="#6063ff" Visible="true" Opacity="0.1"></ChartStripline>
                </ChartStriplines>
            </ChartAxis>
        </ChartAxes>
        <ChartRows>
            <ChartRow Height="40%"></ChartRow>
            <ChartRow Height="60%"></ChartRow>
        </ChartRows>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartZoomSettings EnablePinchZooming="true" EnableSelectionZooming="true" Mode="ZoomMode.X"></ChartZoomSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Period" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open"
                         Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" BearFillColor="#2ecd71" BullFillColor="#e74c3d">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartIndicators>
            <ChartIndicator Type="TechnicalIndicators.Atr" Field="FinancialDataFields.Close" SeriesName="Apple Inc" YAxisName="secondary" Fill="blue" Period="3">
            </ChartIndicator>
        </ChartIndicators>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    private ATRChartData[] ChartPoints { get; set; } = new ATRChartData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<ATRChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class ATRChartData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }
}
